﻿<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>执行计划维护</title>
<link rel="stylesheet" href="${ctx}/common/jslibs/fish/css/fish-desktop-compact.css" />
	<!--[if lt IE 9]>
		<script src="${ctx}/common/jslibs/fish/js/html5shiv.js"></script>
		<script src="${ctx}/common/jslibs/fish/js/respond.js"></script>
	<![endif]-->
<style>
body{border-left:1px solid #d6d6d6;}
label{white-space:nowrap;}
.datetimepicker table{font-size:12px;}

.custom2-ui-jqgrid .ui-jqgrid-view .ui-jqgrid-hdiv .ui-jqgrid-htable th label{font-weight:100}
.custom2-ui-jqgrid .ui-jqgrid-view .ui-jqgrid-hdiv .ui-jqgrid-htable th.ui-th-column{background-color:#cbdbe9;height:30px;border-right:1px solid #b9cee1;font-size:12px;font-weight:100;color:#2c5072;}
.custom2-ui-jqgrid .ui-jqgrid-view .ui-jqgrid-hdiv{border-color:#b9cee1;background-color:#cbdbe9;}
.custom2-ui-jqgrid .ui-jqgrid-view .ui-jqgrid-bdiv{border-top:1px solid #b9cee1;border-left:1px solid #b9cee1;overflow:visible;}
.custom2-ui-jqgrid .ui-jqgrid-view .ui-jqgrid-bdiv .ui-jqgrid-btable tr.jqgrow td{height:30px;border-color:#d9e3ed;font-size:12px;font-weight:100;white-space:normal;overflow:visible;padding:0 6px;}
.custom2-ui-jqgrid .ui-jqgrid-view .ui-jqgrid-bdiv .ui-jqgrid-btable tr.jqgrow td label{font-weight:100}
#searchForm .form-group{margin-bottom:10px;}
.custom2-ui-jqgrid td,th{font-size:12px;font-weight:100}
.custom2-ui-jqgrid td a:hover,td a:focus{ text-decoration: none}
#plan_jqGrid #plan_jqGrid_pager{padding:8px 0;border-top:0;height:auto;}


</style>
</head>
<body>

	<div class="container-fluid">
	<form id="searchForm" action="#" method="post" autocomplete="off">
		<div class="form-horizontal" style="margin-top:10px;padding-top:15px;border-bottom:1px solid #e3e3e3;background-color:#f9f9f9">
				<div class="row">
					<div class="col-sm-3 form-group">
						<label for="" class="col-sm-4 control-label">所属系统</label>
						<div class="col-sm-8 input-group">
							<input type="text" class="form-control" name="nodeId"  id="nodeId"/>
						</div>
					</div>
					<div class="col-sm-3 form-group">
						<label for="" class="col-sm-4 control-label">数据库</label>
						<div class="col-sm-8 input-group">
							<input type="text" class="form-control" name="dbName"  id="dbName" />
						</div>
					</div>
					<div class="col-sm-3 form-group">
						<label for="" class="col-sm-4 control-label">用户名</label>
						<div class="col-sm-8 input-group">
							<input type="text" class="form-control" name="userN"   id="userN" />
						</div>
					</div>
					<div class="col-sm-3 form-group">
						<label for="" class="col-sm-4 control-label"></label>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-3 form-group">
						<label for="" class="col-sm-4 control-label">计划名称</label>
						<div class="col-sm-8 input-group">
							<input type="text" class="form-control" name="planName"  id="planName" />
						</div>
					</div>
					<div class="col-sm-3 form-group">
						<label for="" class="col-sm-4 control-label">数据类型</label>
						<div class="col-sm-8 input-group">
							<input type="text" class="form-control" name="sourceType" id="sourceType" />
						</div>
					</div>
					<div class="col-sm-3 form-group">
						<label for="" class="col-sm-4 control-label">表名</label>
						<div class="col-sm-8 input-group">
							<input type="text" class="form-control" name="tableName"  id="tableName" />
						</div>
					</div>
					<div class="col-sm-3 form-group">
						<label for="" class="col-sm-4 control-label"></label>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-3 form-group">
						<label for="" class="col-sm-4 control-label">执行方式</label>
						<div class="col-sm-8 input-group">
							<input class="form-control" name="execType" id="execType"/>
						</div>
					</div>
					<div class="col-sm-3 form-group">
						<label for="" class="col-sm-4 control-label">执行频率</label>
						<div class="col-sm-8 input-group">
							<input class="form-control" name="execFrequency" id="execFrequency"/>
						</div>
					</div>
					<div class="col-sm-3 form-group">
						<label for="" class="col-sm-4 control-label">状态</label>
						<div class="col-sm-8 input-group">
							<select class="form-control" name="state" id="state">
								<option value="00A" selected="selected">有效</option>
								<option value="00X">无效</option>
							</select>
						</div>
					</div>
					<div class="col-sm-3 ">
						<div class="col-sm-offset-2">
							<button type="button" id="searchBtn" class="btn btn-primary col-sm-5"><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;&nbsp;查找</button>
							&nbsp;&nbsp;&nbsp;
							<button type="reset" class="btn btn-default ">重置</button>
						</div>
					</div>
				</div>
		</div>
	</form>

		<div id="plan_jqGrid" class="custom2-ui-jqgrid"></div>
		<div class="col-sm-3 row" style="padding-top: 10px">
			<button type="button" class="btn btn-primary btn-sm">
				<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;&nbsp;添加计划
			</button>
		</div>
	</div>


	<script src="${ctx}/common/jslibs/fish/js/fish-desktop-all.min.js"></script>

	<script>

	var mydata = [
		    {planName:'计划名称哪个表归档',domode:'单次执行',suoreData:['源数据abcdef_01','源数据abcdef_02','源数据abcdef_03','源数据abcdef_04'],targetData:['目标数据abcdef_01','目标数据abcdef_02','目标数据abcdef_03','目标数据abcdef_04'],startDate:'2012-01-10',endDate:'2012-02-10'},
		    {planName:'计划名称哪个表归档',domode:'单次执行',suoreData:['源数据abcdef_01','源数据abcdef_02','源数据abcdef_03','源数据abcdef_04'],targetData:['目标数据abcdef_01','目标数据abcdef_02','目标数据abcdef_03','目标数据abcdef_04'],startDate:'2012-01-10',endDate:'2012-02-10'},
		    {planName:'计划名称哪个表归档',domode:'单次执行',suoreData:['源数据abcdef_01','源数据abcdef_02','源数据abcdef_03','源数据abcdef_04'],targetData:['目标数据abcdef_01','目标数据abcdef_02','目标数据abcdef_03','目标数据abcdef_04'],startDate:'2012-01-10',endDate:'2012-02-10'},
		    {planName:'计划名称哪个表归档',domode:'单次执行',suoreData:['源数据abcdef_01','源数据abcdef_02','源数据abcdef_03','源数据abcdef_04'],targetData:['目标数据abcdef_01','目标数据abcdef_02','目标数据abcdef_03','目标数据abcdef_04'],startDate:'2012-01-10',endDate:'2012-02-10'},
		    {planName:'计划名称哪个表归档',domode:'单次执行',suoreData:['源数据abcdef_01','源数据abcdef_02','源数据abcdef_03','源数据abcdef_04'],targetData:['目标数据abcdef_01','目标数据abcdef_02','目标数据abcdef_03','目标数据abcdef_04'],startDate:'2012-01-10',endDate:'2012-02-10'},
		    {planName:'计划名称哪个表归档',domode:'单次执行',suoreData:['源数据abcdef_01','源数据abcdef_02','源数据abcdef_03','源数据abcdef_04'],targetData:['目标数据abcdef_01','目标数据abcdef_02','目标数据abcdef_03','目标数据abcdef_04'],startDate:'2012-01-10',endDate:'2012-02-10'},
		    {planName:'计划名称哪个表归档',domode:'单次执行',suoreData:['源数据abcdef_01','源数据abcdef_02','源数据abcdef_03','源数据abcdef_04'],targetData:['目标数据abcdef_01','目标数据abcdef_02','目标数据abcdef_03','目标数据abcdef_04'],startDate:'2012-01-10',endDate:'2012-02-10'},
		    {planName:'计划名称哪个表归档',domode:'单次执行',suoreData:['源数据abcdef_01','源数据abcdef_02','源数据abcdef_03','源数据abcdef_04'],targetData:['目标数据abcdef_01','目标数据abcdef_02','目标数据abcdef_03','目标数据abcdef_04'],startDate:'2012-01-10',endDate:'2012-02-10'},
		    {planName:'计划名称哪个表归档',domode:'单次执行',suoreData:['源数据abcdef_01','源数据abcdef_02','源数据abcdef_03','源数据abcdef_04'],targetData:['目标数据abcdef_01','目标数据abcdef_02','目标数据abcdef_03','目标数据abcdef_04'],startDate:'2012-01-10',endDate:'2012-02-10'},
		    {planName:'计划名称哪个表归档',domode:'单次执行',suoreData:['源数据abcdef_01','源数据abcdef_02','源数据abcdef_03','源数据abcdef_04'],targetData:['目标数据abcdef_01','目标数据abcdef_02','目标数据abcdef_03','目标数据abcdef_04'],startDate:'2012-01-10',endDate:'2012-02-10'},
		];


		function action(rid){
			$(rid).remove()
			//$('#plan_jqGrid').jqGrid('delRowData', rid);
		}
		function mouseOver(target){
				var tdW = ($(target).parent().width()+14)
				$(target).attr('class','glyphicon glyphicon-option-vertical pull-right').nextAll('.dropdown-list').css('width',tdW).slideDown("fast");
		}
		function mouseOut(target){
				$(target).attr('class','glyphicon glyphicon-option-horizontal pull-right').nextAll('.dropdown-list').hide();
		}

		function formatter(cellval, opts, rwdat, _act){
			var tpl = '<a href="javascript:void(0)" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" class="glyphicon glyphicon-option-horizontal pull-right"></a>';
				tpl += cellval[0];
				tpl += '<ul class="dropdown-list" style="left:auto;margin:7px 0 0 -7px;top:auto;min-width:10px">';
				for(var i=0; i < cellval.length ; i++){
					tpl += '<li>'+cellval[i]+'</li>';
				}
				tpl += '</ul>';
				return tpl;
		}
	$(document).ready(function() {
		$('#plan_jqGrid').grid({	
				data:mydata,
				colModel:[
					{name:'planName',label:'计划名称',width:200,sortable:false},
					{name:'domode',label:'执行方式',width:100,sortable:false,align:'center'},
					{name:'suoreData',label:'归档源数据',width:300,sortable:false,title:false,formatter:function(cellval, opts, rwdat, _act){ return formatter(cellval, opts, rwdat, _act)}},
					{name:'targetData',label:'归档目标数据',width:300,sortable:false,title:false,formatter:function(cellval, opts, rwdat, _act){ return formatter(cellval, opts, rwdat, _act)}},
					{name:'startDate',label:'生效日期',width:100,sortable:false,align:'center'},
					{name:'endDate',label:'失效日期',width:100,sortable:false,align:'center'},
					{name:'action',label:'操作',width:80,sortable:false,align:'center'},//,formatter:'actions',formatoptions:{delbutton: true,}
				],
				forceFit:true,
				gridview:false,
				 afterInsertRow: function(rowid, aData){
				 	$('#plan_jqGrid').grid('setCell',rowid,'action','<a href="javascript:void(0)" class="glyphicon glyphicon-edit"></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0)" onclick="jQuery.fn.fmatter.rowactions.call(this,\'del\')" class="glyphicon glyphicon-trash"></a>');
				 },
				rowNum : 5,
				rowList : [5,10,20],
				recordtext:'第{0}~{1}条/共{2}条',
            	pgtext:'第{0}页/共{1}页',
				pager: true,
				height:'auto',
				scrollOffset:0,
			})

		$('input[name="sourceType"]').combobox({
					placeholder : "全部",
					dataTextField : "name",
					dataValueField : "value",
					value : "0",
					dataSource : [{
								name : "全部",
								value : "0"
							}, {
								name : "表",
								value : "1"
							}, {
								name : "文件",
								value : "2"
							}]
			});
		$('input[name="execType"]').combobox({
					placeholder : "全部",
					dataTextField : "name",
					dataValueField : "value",
					value : "0",
					dataSource : [{
								name : "全部",
								value : "0"
							}, {
								name : "自动执行",
								value : "1"
							}, {
								name : "手动执行",
								value : "2"
							}]
				});
		$('input[name="execFrequency"]').combobox({
					placeholder : "全部",
					dataTextField : "name",
					dataValueField : "value",
					value : "99",
					dataSource : [{
								name : "全部",
								value : "99"
							}, {
								name : "循环执行",
								value : "0"
							}, {
								name : "单次执行",
								value : "1"
							}]
				});
	})
	</script>
</body>
</html>
